import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Chart, Tooltip, Axis, Legend, Bar, Interval } from 'viser-react';
import { formatName, forIdCard } from '../../utils/utils';
import CreditDetail from './creditDetail';
const DataSet = require('@antv/data-set');
import {
  Steps,
  Card,
  Spin,
  Divider,
  Table,
  Avatar,
  Button,
  Form,
  Modal,
  Input,
  Select,
  Popconfirm,
  Radio,
  Checkbox,
  InputNumber,
  DatePicker,
  Drawer,
  Timeline,
  Popover,
  Icon,
  message,
  Row,
  Col,
} from 'antd';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import statusConfig from '@/config/status_list.js';
// import statusConfig from '@/config/status.config';
import styles from './BasicList.less';

const { Step } = Steps;
const { Description } = DescriptionList;
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

const refundStatusList = {
  0: '待用户退货',
  1: '待商家收货',
  2: '待商家退款',
  3: '退款成功',
  4: '退款拒绝关闭',
  5: '退款关闭',
  6: '待商家同意申请',
};

const userOrderListStatus = {
  2: '损坏',
  3: '丢失',
  4: '其它',
};
// 退款订单详情
// 创建时间、退款编号、商品信息、实付金额、实退金额、退款状态
const refundColumns = [
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '退款编号',
    dataIndex: 'refundNumber',
    key: 'refundNumber',
    align: 'center',
    render: text => (
      <a href={`/refund/refundList?id=${text}`} target="_blank">
        {text}
      </a>
    ),
  },
  {
    title: '商品信息',
    dataIndex: 'goodsInfo',
    key: 'goodsInfo',
    align: 'center',
  },
  {
    title: '实付金额',
    dataIndex: 'applyAmount',
    key: 'applyAmount',
    align: 'center',
  },
  {
    title: '实退金额',
    dataIndex: 'realRefundAmount',
    key: 'realRefundAmount',
    align: 'center',
  },
  {
    title: '退款状态',
    dataIndex: 'refundStatus',
    key: 'status',
    align: 'center',
    render: text => <span>{refundStatusList[text]}</span>,
  },
];

function statusFormat(status) {
  const statusValues = {
    WAITING_PAYMENT: 1,
    WAITING_BUSINESS_DELIVERY: 2,
    WAITING_USER_RECEIVE_CONFIRM: 3,
    WAITING_GIVE_BACK: 4,
    WAITING_SETTLEMENT: 5,
    WAITING_SETTLEMENT_PAYMENT: 5,
  };
  return statusValues[status] || 6;
}
function expressType(type) {
  const types = ['快递'];
  return types[type];
}
const formatStr = 'YYYY-MM-DD hh:mm:ss';
const CreateDeliverForm = Form.create()(props => {
  const {
    modalVisible,
    form,
    deliverOptions,
    handleModalVisible,
    handleDeliver,
    modalStyle,
    remark,
    reportDetal,
    detailInfo,
  } = props;

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleDeliver(fieldsValue);
      form.resetFields();
    });
  };
  const {
    base_info,
    court_risk_info_list,
    hit_risk_taggin,
    multiple_score,
    personal_loan_demand,
    personal_loan_f,
    personal_loan_s,
    personal_overdue_history,
    queryReportTime,
    relevance_risk_check,
    reportNo,
    risk_list_check,
    score_norm_explain,
    verify_recomment,
    riskLevelData,
    riskGoInfo,
    riskGo,
    loading,
    totalPay,
  } = reportDetal;
  const typesObj = {
    deliver: '快速发货',
    remark: '新增备注',
    settle: '结算',
    card: '身份信息',
  };
  // 申请

  const sourceData1 = [
    {
      name: '近12个月申请机构总数',
      近1个月: personal_loan_s && personal_loan_s.apply_time1,
      近3个月: personal_loan_s && personal_loan_s.apply_time3,
      近6个月: personal_loan_s && personal_loan_s.apply_time6,
      近12个月: personal_loan_s && personal_loan_s.apply_time12,
    },
    {
      name: '消费分期类申请机构数',
      近12个月: personal_loan_s && personal_loan_s.consumer_apply_mechanism_number,
    },
    {
      name: '机构贷款类申请机构数',
      近12个月: personal_loan_s && personal_loan_s.network_loan_apply_mechanis_mnumber,
    },
  ];

  // 放款

  const sourceData2 = [
    {
      name: '近12个月放款机构总数',
      近1个月: personal_loan_f && personal_loan_f.lend_number1,
      近3个月: personal_loan_f && personal_loan_f.lend_number3,
      近6个月: personal_loan_f && personal_loan_f.lend_number6,
      近12个月: personal_loan_f && personal_loan_f.lenders,
    },
    {
      name: '消费分期类放款机构数',
      近12个月: personal_loan_f && personal_loan_f.cflenders,
      // '近12个月': 81,
    },
    {
      name: '机构贷款类放款机构数',
      近12个月: personal_loan_f && personal_loan_f.nllenders,
      // '近12个月': 61,
    },
  ];

  // 逾期
  const sourceData3 = [
    {
      name: '近6个月逾期机构总数',
      近6个月逾期机构总数:
        personal_overdue_history && personal_overdue_history.overdue_mechanism_number,
    },
    {
      name: '进6个月逾期总次数',
      进6个月逾期总次数: personal_overdue_history && personal_overdue_history.overdue_total_counts,
    },
    {
      name: '近6个月未结算逾期次数',
      进6个月逾期总次数: personal_overdue_history && personal_overdue_history.uncleared_counts,
    },
    {
      name: '近6个月逾期总金额(元)',
      近6个月逾期总金额: personal_overdue_history && personal_overdue_history.overdue_total_money,
    },
  ];

  // 关联风险监测
  const sourceData4 = [
    {
      name: '3个月身份证手机号次数',
      '3个月身份证手机号次数': relevance_risk_check && relevance_risk_check.ident_to_phone_counts,
    },
    {
      name: '3个月手机号关联身份证次数',
      '3个月手机号关联身份证次数':
        relevance_risk_check && relevance_risk_check.phone_to_ident_counts,
    },
  ];

  // 贷款需求
  const sourceData5 = [
    {
      name: 'p2p平台',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.p2p_platform,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.p2p_platform,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.p2p_platform,
    },
    {
      name: '信用卡',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.credit_card,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.credit_card,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.credit_card,
    },
    {
      name: '消费分期平台',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.common_amortize_platform,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.common_amortize_platform,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.common_amortize_platform,
    },
    {
      name: '消费金融公司',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.large_finance_platform,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.large_finance_platform,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.large_finance_platform,
    },
    {
      name: '其他平台',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.other_platform,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.other_platform,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.other_platform,
    },
  ];
  const dv1 = new DataSet.View().source(sourceData1);
  const dv2 = new DataSet.View().source(sourceData2);
  const dv3 = new DataSet.View().source(sourceData3);
  const dv4 = new DataSet.View().source(sourceData4);
  const dv5 = new DataSet.View().source(sourceData5);
  dv1.transform({
    type: 'fold',
    fields: ['近1个月', '近3个月', '近6个月', '近12个月'],
    key: '月份',
    value: '月均降雨量',
  });
  dv2.transform({
    type: 'fold',
    fields: ['近1个月', '近3个月', '近6个月', '近12个月'],
    key: '月份',
    value: '月均降雨量',
  });
  dv3.transform({
    type: 'fold',
    fields: [
      '近6个月逾期机构总数',
      '进6个月逾期总次数',
      '近6个月未结算逾期次数',
      '近6个月逾期总金额',
    ],
    key: '月份',
    value: '月均降雨量',
  });
  dv4.transform({
    type: 'fold',
    fields: ['3个月身份证手机号次数', '3个月手机号关联身份证次数'],
    key: '月份',
    value: '月均降雨量',
  });
  dv5.transform({
    type: 'fold',
    fields: ['近7天', '近30天', '近90天'],
    key: '月份',
    value: '月均降雨量',
  });
  const data1 = dv1.rows;
  const data2 = dv2.rows;
  const data3 = dv3.rows;
  const data4 = dv4.rows;
  const data5 = dv5.rows;

  let score_Text = null;
  if (multiple_score >= 0 && multiple_score <= 50) {
    score_Text = '低风险';
  } else if (multiple_score >= 51 && multiple_score <= 80) {
    score_Text = '中风险';
  } else {
    score_Text = '高风险';
  }
  let proposal = null;
  if (multiple_score >= 0 && multiple_score <= 30) {
    proposal = '建议通过';
  } else if (multiple_score >= 30 && multiple_score <= 50) {
    proposal = '建议通过';
  } else if (multiple_score >= 50 && multiple_score <= 60) {
    proposal = '手机建议审核后通过,其他建议通过';
  } else if (multiple_score >= 60 && multiple_score <= 70) {
    proposal = '手机建议审核后通过,其他建议通过';
  } else if (multiple_score >= 70 && multiple_score <= 80) {
    proposal = '手机,数码等高价值商品审核后预收租金，其他建议通过';
  } else if (multiple_score >= 80 && multiple_score <= 90) {
    proposal = '手机，数码等高价值商品建议拒绝，其他建议通过';
  } else {
    proposal = '建议拒绝';
  }
  const grid12 = {
    width: '11.9%',
    textAlign: 'center',
  };
  const grid14 = {
    width: '14.28%',
    textAlign: 'center',
  };
  const grid16 = {
    width: '16.66%',
    textAlign: 'center',
  };
  const gridStyle = {
    width: '20%',
    textAlign: 'center',
  };
  const grid25 = {
    width: '25%',
    textAlign: 'center',
  };
  const grid30 = {
    width: '33.3%',
    textAlign: 'center',
  };
  const grid40 = {
    width: '40%',
    textAlign: 'center',
  };
  const grid50 = {
    width: '50%',
    textAlign: 'center',
  };
  const grid60 = {
    width: '60%',
    textAlign: 'center',
  };
  return (
    <div>
      {modalStyle === 'deliver' && (
        <Modal
          destroyOnClose
          title={modalStyle === 'deliver' ? '快速发货' : '新增备注'}
          visible={modalVisible}
          onOk={okHandle}
          width="450px"
          onCancel={() => handleModalVisible()}
        >
          <div>
            <FormItem>
              {form.getFieldDecorator(
                'expressId',
                {}
              )(
                <Select style={{ width: '100%' }} placeholder="请选择物流公司">
                  {deliverOptions.map(option => {
                    return (
                      <Option key={option.id} value={option.id}>
                        {option.name}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
            <FormItem>
              {form.getFieldDecorator('expressNo', {})(<Input placeholder="请输入物流单号" />)}
            </FormItem>
          </div>
        </Modal>
      )}
      {modalStyle === 'remark' && (
        <Modal
          destroyOnClose
          title={typesObj[modalStyle]}
          visible={modalVisible}
          onOk={okHandle}
          width="450px"
          onCancel={() => handleModalVisible()}
        >
          <FormItem>
            {form.getFieldDecorator('remark', {
              initialValue: remark,
            })(<TextArea rows={4} placeholder="请输入备注信息" />)}
          </FormItem>
        </Modal>
      )}
      {modalStyle === 'reportResult' && (
        <Modal
          destroyOnClose
          title={typesObj[modalStyle]}
          visible={modalVisible}
          onOk={okHandle}
          width="1200px"
          onCancel={() => handleModalVisible()}
          footer={null}
        >
          <CreditDetail
            userOrders={detailInfo.userOrders}
            creditInfo={props.reportDetal}
          ></CreditDetail>
        </Modal>
      )}
    </div>
  );
});
/* eslint-disable no-script-url */
@connect(({ detail, loading }) => ({
  ...detail,
  loading: loading.models.detail,
}))
@Form.create()
class BasicList extends PureComponent {
  state = {
    // radioValue: 'good',
    // checkValue: false,
    // damageVal: 0, // 损坏
    remark: '',
    drawerVisible: false,
    drawerType: 'deliver',
    drawerData: [],
    confirmSettlementVisible: false,
    confirmSettlementInfo: {},
    notedata: [{ name: 'baicha' }, { name: 'baicha' }],
  };
  onRequestDetail = () => {
    const { dispatch, match } = this.props;
    const { params } = match;
    // console.log(params, 'params')
    dispatch({
      type: 'detail/queryOrderDetail',
      payload: {
        id: params.id,
      },
    });
  };
  componentDidMount() {
    this.onRequestDetail();
  }

  setDispatch(modalStyle) {
    const { dispatch } = this.props;
    // console.log(22, modalStyle)
    dispatch({
      type: 'detail/save',
      payload: {
        modalVisible: true,
        modalStyle,
      },
    });
  }

  deliverGoods = (type, val) => {
    const { dispatch } = this.props;
    if (type === 'reportResult') {
      dispatch({
        type: 'detail/generateReportByOrderId',
        payload: {
          orderId: val.orderId,
          uid: val.uid,
        },
        callback: res => {
          if (!res.data) {
            message.error('暂无信用数据');
          } else {
            // console.log(11, type)
            this.setDispatch(type);
          }
        },
      });
    } else {
      this.setDispatch(type);
      dispatch({
        type: 'detail/queryDeliverOps',
      });
    }
  };

  handleModalVisible = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/save',
      payload: {
        modalVisible: false,
      },
    });
  };

  handleDeliver = params => {
    const { dispatch, match, modalStyle } = this.props;
    if (modalStyle === 'remark') {
      dispatch({
        type: 'detail/pushRemark',
        payload: {
          orderId: match.params.id,
          remark: params.remark,
        },
        callback: () => {
          this.onRequestDetail();
        },
      });
    } else {
      dispatch({
        type: 'detail/sendDeliver',
        payload: {
          ...params,
          orderId: match.params.id,
        },
      });
    }
  };

  addRemark = (type, remark) => {
    this.setState({ remark });
    this.setDispatch(type);
  };

  confirm = () => {
    const { dispatch, match } = this.props;
    dispatch({
      type: 'detail/closeOrder',
      payload: {
        orderId: match.params.id,
      },
    });
  };

  onRadioChange = e => {
    const { dispatch, checkValue } = this.props;
    dispatch({
      type: 'detail/save',
      payload: {
        radioValue: e.target.value,
        checkValue: e.target.value === 'good' ? false : checkValue,
      },
    });
  };

  onCheckChange = e => {
    const { dispatch, radioValue } = this.props;
    dispatch({
      type: 'detail/save',
      payload: {
        checkValue: e.target.checked,
        radioValue: e.target.checked && radioValue === 'good' ? 'other' : radioValue,
      },
    });
  };

  damageValue = val => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/save',
      payload: {
        damageVal: val,
      },
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch, match, detailInfo, checkValue, damageVal, radioValue } = this.props;
    const statusFormatObj = {
      good: 1,
      damage: 2,
      lose: 3,
      other: 4,
    };
    const status = statusFormatObj[radioValue];
    let listStatus = [];
    if (status) {
      listStatus = [status];
    }

    form.validateFields((err, values) => {
      if (!err) {
        let { end, start } = values;
        start = start && moment(start).format('YYYY-MM-DD 00:00:00');
        end = end && moment(end).format(formatStr);
        if (status === 4) {
          const payload = {
            orderId: match.params.id,
            originalOrderId: detailInfo.userOrders.originalOrderId
              ? detailInfo.userOrders.originalOrderId
              : match.params.id,
            losePrice: status === 3 ? damageVal : 0,
            listStatus,
            damagePrice: status === 2 ? damageVal : 0,
            userViolationRecords: {
              start: moment(start).format('YYYY-MM-DD 00:00:00'),
              end: moment(end).format('YYYY-MM-DD 00:00:00'),
              type: 1,
              reason: values.reason,
              amount: values.amount,
              userOrderCashId: detailInfo.userOrderCashes.id,
            },
          };
          if (detailInfo.userViolationRecords[0] && detailInfo.userViolationRecords[0].id) {
            payload.userViolationRecords.id = detailInfo.userViolationRecords[0].id;
          }
          this.setState({
            confirmSettlementVisible: true,
            confirmSettlementInfo: payload,
          });
          // dispatch({
          //   type: 'detail/settleOrder',
          //   payload,
          // });
        } else {
          const payload = {
            orderId: match.params.id,
            originalOrderId: detailInfo.userOrders.originalOrderId
              ? detailInfo.userOrders.originalOrderId
              : match.params.id,
            losePrice: status === 3 ? damageVal : 0,
            listStatus,
            damagePrice: status === 2 ? damageVal : 0,
          };
          this.setState({
            confirmSettlementVisible: true,
            confirmSettlementInfo: payload,
          });
          // dispatch({
          //   type: 'detail/settleOrder',
          //   payload,
          // });
        }
      }
    });
  };

  showDrawer = (drawerType, data) => {
    if (!data) {
      message.error('暂无物流进度');
      return;
    }
    const { result } = data;
    const list = result.list.reverse();
    this.setState({
      drawerType,
      drawerData: list,
      drawerVisible: true,
    });
  };

  onClose = () => {
    this.setState({
      drawerVisible: false,
    });
  };

  confirmSettlement = () => {
    // console.log(this.state.confirmSettlementInfo)
    this.props.dispatch({
      type: 'detail/settleOrder',
      payload: this.state.confirmSettlementInfo,
      callback: res => {
        if (res.code) {
          this.setState({
            confirmSettlementVisible: false,
          });
        }
      },
    });
  };

  render() {
    const {
      detailInfo,
      loading,
      modalVisible,
      deliverOptions,
      modalStyle,
      form,
      radioValue,
      checkValue,
      damageVal,
      reportDetal,
    } = this.props;

    const {
      remark,
      drawerType,
      drawerVisible,
      drawerData,
      confirmSettlementInfo,
      notedata,
    } = this.state;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const {
      userOrderCashes,
      orderByStagesList,
      userOrders,
      product,
      userViolationRecords,
      shopAdditionalList,
      refundOrder,
      refundOrderList,
      userOrderSettlement, //结算单详情
      businessRemark,
      opeRemark,
    } = detailInfo;
    const productColumns = [
      {
        title: '宝贝',
        dataIndex: 'product',
        key: 'product',
        render: (text, record) => {
          return (
            <div className={styles.product}>
              {record.images && <Avatar shape="square" size={64} src={record.images[0].src} />}
              <div className={styles.product_desc}>
                <div className={styles.product_name}>{record.productName}</div>
              </div>
            </div>
          );
        },
      },
      {
        title: '宝贝属性',
        dataIndex: 'skuTitle',
        key: 'skuTitle',
      },
      {
        title: '单价',
        dataIndex: 'rentPrice',
        key: 'rentPrice',
      },
      {
        title: '数量',
        dataIndex: 'nums',
        key: 'nums',
      },
    ];
    const rentColumns = [
      {
        title: '租用天数',
        dataIndex: 'rentDayNum',
        key: 'rentDayNum',
      },
      {
        title: '起租时间',
        dataIndex: 'rentStart',
        key: 'rentStart',
      },
      {
        title: '归还时间',
        dataIndex: 'rentEnd',
        key: 'rentEnd',
      },
    ];
    const rentInfoColumns = [
      {
        title: '单价',
        dataIndex: 'rentPrice',
        key: 'rentPrice',
      },
      {
        title: '天数',
        dataIndex: 'rentDuration',
        key: 'rentDuration',
      },
      {
        title: '数量',
        dataIndex: 'nums',
        key: 'nums',
      },
      {
        title: '平台优惠',
        dataIndex: 'platformCouponReduction',
        key: 'platformCouponReduction',
      },
      {
        title: '店铺优惠',
        dataIndex: 'couponReduction',
        key: 'couponReduction',
      },
      {
        title: '增值服务费',
        dataIndex: 'additionalServicesPrice',
        key: 'additionalServicesPrice',
        render: (text, record) => {
          const content = (
            <div className={styles.content}>
              {record.shopAdditionalList &&
                record.shopAdditionalList.map(item => (
                  <div key={item.id}>
                    <div>{item.name}</div>
                    <div>{item.content}</div>
                  </div>
                ))}
            </div>
          );
          return (
            <div>
              <span style={{ marginRight: '12px' }}>{record.additionalServicesPrice}</span>
              <Popover trigger="click" content={content}>
                <Icon type="question-circle" />
              </Popover>
            </div>
          );
        },
      },
      {
        title: '运费',
        dataIndex: 'freightPrice',
        key: 'freightPrice',
      },
      {
        title: '应收总租金',
        dataIndex: 'totalRent',
        key: 'totalRent',
      },
    ];
    const depositColumns = [
      {
        title: '总押金',
        dataIndex: 'totalDeposit',
        key: 'totalDeposit',
      },
      {
        title: '信用减免',
        dataIndex: 'deposit',
        key: 'deposit',
      },
      {
        title: '实付押金',
        dataIndex: 'realDeposit',
        key: 'realDeposit',
      },
    ];
    const periodsColumns = [
      {
        title: '总期数',
        dataIndex: 'totalPeriods',
        key: 'totalPeriods',
      },
      {
        title: '当前期数',
        dataIndex: 'currentPeriods',
        key: 'currentPeriods',
      },
      {
        title: '租金',
        dataIndex: 'currentPeriodsRent',
        key: 'currentPeriodsRent',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (text, record) => {
          const types = [
            '',
            '待支付',
            '已支付',
            '逾期已支付',
            '逾期待支付',
            '已取消',
            '已结算',
            '已退款',
          ];
          return <div>{types[record.status]}</div>;
        },
      },
      {
        title: '账单到期时间',
        dataIndex: 'statementDate',
        key: 'statementDate',
      },
    ];
    // 结算单详情
    const violationColumns = [
      {
        title: '结算单状态',
        dataIndex: 'paymentStatus',
        key: 'paymentStatus',
        render: text => <span>{text ? '已支付' : '待支付'}</span>,
      },
      {
        title: '结算类型',
        dataIndex: 'type',
        key: 'type',
        render: text => <span>{userOrderListStatus[text]}</span>,
      },
      {
        title: '结算单金额',
        dataIndex: 'amount',
        key: 'amount',
      },
      {
        title: '原因',
        dataIndex: 'reason',
        key: 'reason',
        render: text => <span>{text ? text : '暂无'}</span>,
      },
    ];
    const productData = userOrderCashes
      ? [
          {
            rowKey: 'productData',
            images: product.images,
            productName: product.productName,
            skuTitle: product.skuTitle,
            rentPrice: userOrderCashes.rent,
            nums: userOrders.nums,
          },
        ]
      : [];
    const rentData = userOrderCashes
      ? [
          {
            rowKey: 'rentData',
            rentDayNum: userOrders.rentDuration,
            rentStart: userOrders.rentStart,
            rentEnd: userOrders.unrentTime,
          },
        ]
      : [];
    const rentInfoData = userOrderCashes
      ? [
          {
            rowKey: 'rentInfoData',
            rentPrice: userOrderCashes.rent,
            rentDuration: userOrders.rentDuration,
            nums: userOrders.nums,
            platformCouponReduction: userOrderCashes.platformCouponReduction,
            couponReduction: userOrderCashes.couponReduction,
            freightPrice: userOrderCashes.freightPrice,
            totalRent: userOrderCashes.totalRent,
            additionalServicesPrice: userOrderCashes.additionalServicesPrice,
            shopAdditionalList,
          },
        ]
      : [];
    const depositData = userOrderCashes
      ? [
          {
            rowKey: 'depositData',
            depositReduction: userOrders.from === 5 ? 0 : userOrderCashes.depositReduction,
            deposit:
              userOrders.from === 5
                ? userOrderCashes.depositReduction
                : userOrderCashes.creditAmount,
            totalDeposit: userOrderCashes.totalDeposit,
            realDeposit:
              userOrders.from === 5 ? userOrderCashes.deposit : userOrderCashes.fundAmount,
          },
        ]
      : [];
    const periodsData = orderByStagesList || [];
    const violationData = [
      {
        id: 0,
        paymentStatus: userOrderSettlement && userOrderSettlement.paymentStatus,
        type: userOrderSettlement && userOrderSettlement.type,
        amount: userOrderSettlement && userOrderSettlement.amount,
        reason: userOrderSettlement && userOrderSettlement.reason,
      },
    ];
    const parentProps = {
      modalVisible,
      deliverOptions,
      modalStyle,
      handleModalVisible: this.handleModalVisible,
      handleDeliver: this.handleDeliver,
      remark,
      reportDetal,
      detailInfo,
    };
    //退款订单详情
    const refundOrderData = [];
    refundOrderList &&
      refundOrderList.map(item => {
        refundOrderData.push({
          createTime: item.createTime,
          refundNumber: item.refundNumber,
          goodsInfo: product && product.productName + '/' + product.skuTitle,
          applyAmount: item.applyAmount,
          realRefundAmount: item.realRefundAmount,
          refundStatus: item.refundStatus,
        });
      });

    const confirmSettlementStatus = {
      1: '完好',
      2: '损坏',
      3: '丢失',
      4: '其它',
    };
    return (
      <PageHeaderWrapper back title="订单详情">
        <Spin spinning={loading} delay={100}>
          {detailInfo.userOrders && (
            <div>
              <Steps progressDot current={statusFormat(detailInfo.userOrders.status)}>
                <Step description="买家下单" />
                <Step description="买家付款" />
                <Step description="商家发货" />
                <Step description="买家租用" />
                <Step description="归还与结算" />
                <Step description="订单完成" />
              </Steps>
              <Card style={{ marginTop: '20px', background: '#fff6e8', borderColor: '#f5a623' }}>
                <h3>
                  当前订单状态：
                  <span>
                    {detailInfo.userOrders.type === 2 && <span>续租</span>}
                    {detailInfo.userOrders.type === 3 && <span>买断</span>}
                  </span>
                  {statusConfig[detailInfo.userOrders.status]}
                  {detailInfo.userOrders.status == 'WAITING_BUSINESS_DELIVERY' &&
                    detailInfo.userOrders.examineStatus == 1 && <span>（用户申请关单）</span>}
                </h3>
                {/* {detailInfo.userOrders.shopRemark && (
                  <Card>备注: {detailInfo.userOrders.shopRemark}</Card>
                )} */}
                <div style={{ marginTop: '15px' }}>
                  {detailInfo.userOrders.status === 'WAITING_BUSINESS_DELIVERY' && (
                    <Button
                      onClick={() => this.deliverGoods('deliver')}
                      type="primary"
                      style={{ marginRight: '20px' }}
                    >
                      发货
                    </Button>
                  )}
                  <Button
                    onClick={() => this.addRemark('remark', detailInfo.userOrders.shopRemark)}
                    type="primary"
                  >
                    新增备注
                  </Button>
                  {detailInfo.userOrders.status === 'WAITING_PAYMENT' && (
                    <Popconfirm title="确定关闭订单吗?" onConfirm={() => this.confirm()}>
                      <a style={{ color: '#999', marginLeft: '20px' }} href="javascript:;">
                        关闭订单
                      </a>
                    </Popconfirm>
                  )}
                </div>
              </Card>
              <Card style={{ marginTop: '20px' }} type="inner" title="订单信息">
                <div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '12px' }}>
                XX平台备注
                </div>
                {opeRemark.map((item, index) => {
                  return (
                    <DescriptionList key={index} size="small" style={{ marginBottom: 16 }}>
                      <Description term="备注人">{item.userName}</Description>
                      <Description term="备注内容">{item.remark}</Description>
                      <Description term="备注时间"> {item.createTime} </Description>
                    </DescriptionList>
                  );
                })}
                <Divider style={{ margin: '16px 0' }} />
                <div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '12px' }}>
                  商家备注
                </div>
                {businessRemark.map((item, index) => {
                  return (
                    <DescriptionList key={index} size="small" style={{ marginBottom: 16 }}>
                      <Description term="备注人">{item.userName}</Description>
                      <Description term="备注内容">{item.remark}</Description>
                      <Description term="备注时间"> {item.createTime} </Description>
                    </DescriptionList>
                  );
                })}
                <Divider style={{ margin: '16px 0' }} />
                <DescriptionList size="small" style={{ marginBottom: 16 }} title="买家信息">
                  <Description term="真实姓名">{detailInfo.userOrders.realName}</Description>
                  <Description term="联系电话">{detailInfo.userOrders.telephone}</Description>
                  {detailInfo.userOrders.remark && (
                    <Description term="用户备注">{detailInfo.userOrders.remark}</Description>
                  )}
                  <Description term="身份证">{detailInfo.userOrders.idCard}</Description>
                  <Description term="平台未完结订单数（包含该订单）">
                    {detailInfo.userOrders.userPayCount}
                  </Description>
                  <Description term="平台已完结订单数">
                    {detailInfo.userOrders.userFinishCount}
                  </Description>
                  <Description term="信用等级">
                    {detailInfo.creditScore}
                    <Button
                      type="primary"
                      onClick={() =>
                        this.deliverGoods('reportResult', {
                          orderId: userOrders.orderId,
                          uid: detailInfo.userOrders.uid,
                        })
                      }
                      style={{ marginLeft: 10 }}
                    >
                      信用详情
                    </Button>
                  </Description>
                </DescriptionList>
                <Divider style={{ margin: '16px 0' }} />
                {detailInfo.orderAddress && (
                  <DescriptionList size="small" style={{ marginBottom: 16 }} title="收货信息">
                    <Description term="收货人">{detailInfo.orderAddress.realname}</Description>
                    <Description term="电话">{detailInfo.orderAddress.telephone}</Description>
                    <Description term="地址">
                      {detailInfo.orderAddress.provinceStr +
                        detailInfo.orderAddress.cityStr +
                        detailInfo.orderAddress.areaStr +
                        detailInfo.orderAddress.street}
                    </Description>
                  </DescriptionList>
                )}
                <Divider style={{ margin: '16px 0' }} />
                {detailInfo.platformExpress && (
                  <div>
                    <DescriptionList size="small" style={{ marginBottom: 16 }} title="发货物流信息">
                      <Description term="快递样式">{detailInfo.platformExpress.name}</Description>
                      <Description term="物流方式">
                        {expressType(detailInfo.userOrders.logisticForm)}
                      </Description>
                      <Description term="快递单号">{detailInfo.userOrders.expressNo}</Description>
                      <Description>
                        <Button
                          size="small"
                          onClick={() => this.showDrawer('deliver', detailInfo.logisticsList)}
                        >
                          查看物流
                        </Button>
                      </Description>
                    </DescriptionList>
                    <Divider style={{ margin: '16px 0' }} />
                  </div>
                )}
                {detailInfo.userOrders && detailInfo.userOrders.unrentExpressNo && (
                  <div>
                    <DescriptionList size="small" style={{ marginBottom: 16 }} title="归还物流信息">
                      <Description term="快递样式">
                        {detailInfo.giveBackPlatformExpress &&
                          detailInfo.giveBackPlatformExpress.name}
                      </Description>
                      <Description term="物流方式">{expressType(0)}</Description>
                      <Description term="快递单号">
                        {detailInfo.userOrders.unrentExpressNo}
                      </Description>
                      <Description>
                        <Button
                          size="small"
                          onClick={() => this.showDrawer('send', detailInfo.giveBackLogisticsList)}
                        >
                          查看物流
                        </Button>
                      </Description>
                    </DescriptionList>
                    <Divider style={{ margin: '16px 0' }} />
                  </div>
                )}
                <div className={styles.title}>商品信息</div>
                <Table
                  rowKey="rowKey"
                  style={{ marginBottom: 16 }}
                  pagination={false}
                  loading={loading}
                  dataSource={productData}
                  columns={productColumns}
                />
                <div className={styles.title}>租金信息</div>
                <Table
                  rowKey="rowKey"
                  style={{ marginBottom: 16 }}
                  pagination={false}
                  loading={loading}
                  dataSource={rentInfoData}
                  columns={rentInfoColumns}
                />
                <div className={styles.title}>租期信息</div>
                <Table
                  rowKey="rowKey"
                  style={{ marginBottom: 16 }}
                  pagination={false}
                  loading={loading}
                  dataSource={rentData}
                  columns={rentColumns}
                />
                <div className={styles.title}>押金信息</div>
                <Table
                  rowKey="rowKey"
                  style={{ marginBottom: 16 }}
                  pagination={false}
                  loading={loading}
                  dataSource={depositData}
                  columns={depositColumns}
                />
                {refundOrderList && refundOrderList.length > 0 ? (
                  <Fragment>
                    <div className={styles.title} style={{ marginTop: 10 }}>
                      退款订单详情
                    </div>
                    <Table
                      style={{ marginTop: 10 }}
                      columns={refundColumns}
                      dataSource={refundOrderData}
                      rowKey={record => record.refundNumber}
                      pagination={false}
                    />
                  </Fragment>
                ) : null}
                {periodsData.length > 0 && (
                  <div>
                    <div className={styles.title} style={{ marginTop: 10 }}>
                      分期信息
                    </div>
                    <Table
                      rowKey={record => record.currentPeriods}
                      style={{ marginBottom: 16 }}
                      pagination={false}
                      loading={loading}
                      dataSource={periodsData}
                      columns={periodsColumns}
                    />
                  </div>
                )}
                {detailInfo.userOrders.status === 'WAITING_SETTLEMENT' && (
                  <div>
                    <div className={styles.title}>结算单</div>
                    <div>
                      <span style={{ marginRight: '20px' }}>宝贝状态</span>
                      <Radio.Group onChange={this.onRadioChange} value={radioValue}>
                        <Radio value="good">完好</Radio>
                        <Radio value="damage">损坏</Radio>
                        <Radio value="lose">丢失</Radio>
                        <Radio value="other">其他</Radio>
                      </Radio.Group>
                      {radioValue === 'damage' && (
                        <div style={{ display: 'inline-block' }}>
                          <span style={{ marginLeft: '40px' }}>损坏赔偿金：</span>
                          <InputNumber
                            min={0}
                            defaultValue={0}
                            value={damageVal}
                            onChange={this.damageValue}
                          />
                          <span>元</span>
                        </div>
                      )}
                      {radioValue === 'lose' && (
                        <div style={{ display: 'inline-block' }}>
                          <span style={{ marginLeft: '40px' }}>丢失赔偿金：</span>
                          <InputNumber
                            min={0}
                            defaultValue={0}
                            value={damageVal}
                            onChange={this.damageValue}
                          />
                          <span>元</span>
                        </div>
                      )}
                    </div>
                    <div style={{ marginTop: 20 }}>
                      <Form
                        {...formItemLayout}
                        style={{ width: '50%' }}
                        onSubmit={this.handleSubmit}
                      >
                        {radioValue === 'other' && (
                          <div>
                            <Form.Item label="违约金：">
                              {getFieldDecorator('amount', {
                                initialValue: detailInfo.userViolationRecords[0]
                                  ? detailInfo.userViolationRecords[0].amount
                                  : 0,
                              })(<InputNumber min={0} />)}
                              <span>元</span>
                            </Form.Item>
                            <Form.Item label="违约原因：">
                              {getFieldDecorator('reason', {
                                initialValue: detailInfo.userViolationRecords[0]
                                  ? detailInfo.userViolationRecords[0].reason
                                  : '',
                              })(<Input style={{ width: '60%' }} placeholder="请输入违约原因" />)}
                            </Form.Item>
                          </div>
                        )}
                        <Form.Item>
                          <Button type="primary" htmlType="submit" style={{ marginLeft: '6em' }}>
                            确认
                          </Button>
                        </Form.Item>
                      </Form>
                    </div>
                    <Divider style={{ margin: '16px 0' }} />
                  </div>
                )}
                {(detailInfo.userOrders.status === 'WAITING_SETTLEMENT' ||
                  detailInfo.userOrders.status === 'CAN_SEND_DO_SETTLEMENT_AGAIN_FOR_USER' ||
                  detailInfo.userOrders.status === 'WAITING_SETTLEMENT_PAYMENT' ||
                  detailInfo.userOrders.status === 'ORDER_FINISH' ||
                  detailInfo.userOrders.status === 'ORDER_VERDUE') && (
                  <div>
                    {userOrderSettlement && userOrderSettlement ? (
                      <Fragment>
                        <div className={styles.title}>结算单</div>
                        <Table
                          rowKey={record => record.id}
                          style={{ marginBottom: 16 }}
                          pagination={false}
                          loading={loading}
                          dataSource={violationData}
                          columns={violationColumns}
                        />
                      </Fragment>
                    ) : null}
                  </div>
                )}
                <div>创建时间: {detailInfo.userOrders.createTime}</div>
                {detailInfo.userOrders.deliveryTime && (
                  <div>发货时间: {detailInfo.userOrders.deliveryTime}</div>
                )}
              </Card>
            </div>
          )}
        </Spin>
        <CreateDeliverForm {...parentProps} />
        <Drawer
          width={420}
          title={drawerType === 'deliver' ? '发货物流详情' : '归还物流详情'}
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={drawerVisible}
        >
          <Timeline>
            {drawerData.map((item, idx) => {
              let color = 'blue';
              if (idx === 0) {
                color = 'green';
              }
              return (
                <Timeline.Item style={{ color: idx !== 0 ? '#aaa' : '#333' }} color={color}>
                  <p>{item.remark}</p>
                  <p>{item.datetime}</p>
                </Timeline.Item>
              );
            })}
          </Timeline>
        </Drawer>
        {/* 商家结算的二次确认 */}
        <Modal
          title="是否确认结算？"
          zIndex={2000}
          visible={this.state.confirmSettlementVisible}
          onOk={this.confirmSettlement}
          onCancel={() => this.setState({ confirmSettlementVisible: false })}
        >
          <Row>
            <Col>
              结算类型：
              {confirmSettlementInfo.listStatus && confirmSettlementInfo.listStatus.length > 0
                ? confirmSettlementStatus[confirmSettlementInfo.listStatus[0]]
                : '无'}
            </Col>
            <Col>
              结算金额：
              {confirmSettlementInfo.listStatus && confirmSettlementInfo.listStatus.length > 0
                ? confirmSettlementInfo.listStatus && confirmSettlementInfo.listStatus[0] == 3
                  ? confirmSettlementInfo.losePrice
                  : confirmSettlementInfo.listStatus[0] == 4
                  ? confirmSettlementInfo.userViolationRecords.amount
                  : confirmSettlementInfo.damagePrice
                : '无'}
              元
            </Col>
            {confirmSettlementInfo.userViolationRecords && (
              <Col>原因：{confirmSettlementInfo.userViolationRecords.reason}</Col>
            )}
          </Row>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default BasicList;
